
// @import './routerconfig/routerStyle2'

ss-admin($class= '.routerGroup', $config = admin, $menusClass = '>.router-menus')
  cfg = merge({}, admin, $config)
  //所有内容在一屏内显示
  /html, body, .container, .router-container
    height 100%
    overflow: hidden
  .router-container
    ss-display-flex(column)
  {$class}
    background: cfg.$routerBg if cfg.$routerBg
    padding: cfg.$space if cfg.$space
    ss-display-flex(row nowrap, flex-start)
    overflow: hidden
    flex: 1
    //菜单部分
    >.router-menus
      border-right: cfg.$box-line  if (cfg.$box-line)
      background: cfg.$mBg2 if cfg.$mBg2
      color: cfg.$mColor   if cfg.$mColor
      margin-right: cfg.$space if cfg.$space
      flex: 0 0 auto
      &.active
        opacity: 0
        width: 0
      ss-menus($menusClass)
      ss-func-customscroll($menusClass, {$height: auto, $min-height: 300px, $scrollbarShow: false}) if cfg.$scrollBox     //滚动
    //内容部分
    >.router-page
      flex: 1
      padding: cfg.$boxSpace
      background: cfg.$mBg if cfg.$mBg
      border-radius: cfg.$br  if cfg.$br
      overflow: hidden
    ss-func-customscroll('.router-page', {$height: auto, $min-height: 300px}) if cfg.$scrollBox     //滚动
    


/***************路由菜单部分*********************/
ss-menus($class='>.hlist', $config = adminMenus)
  if ($config.$mWidth != false)
    width: $config.$width 
    max-width: $config.$mWidth 
  {$class}
    background: $config.$mBg if $config.$mBg
    border-radius: $config.$br  if $config.$br
    box-shadow: $config.$bs  if $config.$bs
    color: $config.$mColor   if $config.$mColor
    transition: 250ms ease;
    font-size: $config.$size if $config.$size
    padding: $config.$space-b if $config.$space-b
    >.item
      margin-top: 15px
      &:first-child
        margin-top: 30px
      &:last-child
        margin-bottom: 30px
  .itemroot
    >.htitle
      margin: $config.$space
      font-size: $config.$size-title if $config.$size-title
      color: fade-out($config.$mColor, .5)
      line-height: $config.$lh-title if $config.$lh-title
      if ($config.$mLine)
        border-bottom: 1px solid $config.$mLine
        display: block
    &.active-none
      .ul
        display: none
    &.active
      .item-title
        &:after
          transform: rotateZ(180deg)
      .ul
        height: auto
        display: block
  .item-hide
    ss-display-flex(row wrap)
    >.htitle
      display: flex
      flex: 1
      &:after
        content: '\e74e'
        margin-left: auto
    .ul
      width: 100%
      display: none
    &.active
      background: $config.$mUlBg2 if $config.$mUlBg2
  .ul
    background: $config.$mUlBg if $config.$mUlBg
    border-radius: $config.$br  if $config.$br
    box-shadow: $config.$bs  if $config.$bs
    line-height: $config.$lh if $config.$lh
    [class*='-item']
      cursor: pointer
      padding: $config.$space
      color: $config.$color
      &:hover
        background: $config.$mHoverItemBg if ($config.$mHoverItemBg)
        color: adminMenus.$mHoverColor if ($config.$mHoverColor)
      &.active
        background: $config.$mActiveItemBg if ($config.$mActiveItemBg)
        color: adminMenus.$mActiveColor
      &[data-path*='item-title']
        font-size: 16px
        font-weight: bold
        &:hover
          color: $color-text-title
  if ($config.$type == 'activeline') 
    & {adminMenus.$typeClass}
      position: relative
      &:after //线条
        content: ''
        width: 2px
        height: 100%
        background: transparent
        position: absolute
        if (adminMenus.$typeleft)
          left: 0
        else
          right: 0
        top: 0
      &.active, &:hover
        background: fade-out(adminMenus.$mActiveBg, .9)
        color: adminMenus.$mActiveBg
      &.active
        &:after //线条
          background: adminMenus.$mActiveBg

  if (adminMenus.$isShowIcon)
    .item-icon
      &:before
        // content: adminMenus.$iconName if adminMenus.$iconName
        margin-right: 6px
        font-size: 14px
    .item-title
      flex: 1
      
  if (adminMenus.$isAllShow == false)
    .item-hide
      .ul
        display: none
      .item-icon
        cursor: pointer
      .item-title
        ss-display-flex(row nowrap, space-between)
        margin: 0 2em   if adminMenus.$isShowIcon == row
        margin-top: 7px   if adminMenus.$isShowIcon == column
        if (adminMenus.$isShowIconRight)
          &:after
            content: '\e617'
            transform: rotateZ(0)
            display: block
            font-size: 12px
/***************路由菜单部分 end*********************/


/***************路由顶部部分*********************/
ss-root-header($class= '.root-header', $config = false, $class2 = '.admin-header')
  cfg = merge({}, rootHeadCfg, $config)
  {$class}
    background: cfg.$HeaderBg
    box-shadow: $box-shadow
    box-sizing: border-box
    color: cfg.$HeadColor
    font-size: cfg.$HeadSize
    height: cfg.$HeaderHeight
    position: relative
    transition: 250ms ease;
    z-index 1
    {$class2}
      @extends $flex-nowrap-start-center
      // height: 100%
    .item-logo
      width: cfg.$logoWidth if cfg.$logoWidth
      height: cfg.$HeaderHeight
      padding: var(--space, $space)
      box-sizing: border-box
      if (cfg.$bgimage)
        background-image: url(cfg.$bgimage)
        background-repeat: no-repeat
        background-position: center center
        background-size: contain
        .item-logo-title
          display: none
      else 
        @extends $flex-nowrap-center-center
        .item-logo-title
          margin-left: 4px
          font-size: 36px
          font-family: monospace
    .item-nav
      ss-display-flex()
      line-height: 30px
      font-size: 16px
      >.item
        &.active
          a
            color: $color-primary
    .hbody
      flex: 1
      @extends $flex-nowrap-between-center
    .admin-right
      @extends $flex-nowrap
      margin-left: auto
    .icon-active
      margin-left: 36px
/***************路由顶部部分 end*********************/